import React, { Component } from 'react';
import { registerUser, loginUser } from '../../utils/api'
import bear from '../../image/bear.png';
import '../../style/all.css';
import './LoginOrRegister.css';

export default class LoginOrRegister extends Component {
	state = {
		// 当前激活的菜单索引
		activeIndex: 0,
		// 登录
		loginUserName: '',
		loginPassWord: '',
		// 注册
		registerUserName: '',
		registerPassWord: '',
		registerNickName: '',
		registerIntroduction: '',
		registerAvator: null,
		registerSex: '男',
		// imgsrc
		imgsrc: ''
	}
	// 登录
	async login () {
		let { loginUserName, loginPassWord } = this.state;
		// 校验
		let loginUTrim = loginUserName.trim();
		let loginPTrim = loginPassWord.trim();
		if (!/\w/.test(loginUTrim)) {
			window.alert('用户名不能是中文！');
			return;
		}
		if (loginUTrim.length > 12 || loginUTrim.length < 4) {
			window.alert('用户名的长度为4-12位！');
			return;
		}
		if (loginPTrim.trim().length > 12 || loginPTrim.trim().length < 4) {
			window.alert('密码的长度为4-12位！');
			return;
		}
		// 调用接口
		let info = await loginUser(loginUTrim, loginPTrim);
		if (info.status === 0) {
			window.sessionStorage.setItem('token', info.token);
			window.sessionStorage.setItem('userid', info.data.userid);
			this.props.history.push('/index');
		} else {
			window.alert(info.message);
		}
	}
	// 注册
	async register () {
		let { registerUserName, registerPassWord, registerNickName, registerSex, registerAvator, registerIntroduction } = this.state;
		// 校验
		let registerUTrim = registerUserName.trim();
		let registerPTrim = registerPassWord.trim();
		let registerNTrim = registerNickName.trim();
		if (!/\w/.test(registerUTrim)) {
			window.alert('用户名不能是中文！');
			return;
		}
		if (registerUTrim.length > 12 || registerUTrim.length < 4) {
			window.alert('用户名的长度为4-12位！');
			return;
		}
		if (registerPTrim.trim().length > 12 || registerPTrim.trim().length < 4) {
			window.alert('密码的长度为4-12位！');
			return;
		}
		if (registerNTrim.trim().length > 10 || registerNTrim.trim().length < 1) {
			window.alert('昵称的长度为1-10位！');
			return;
		}
		if (registerAvator == null) {
			window.alert('头像不能为空！');
			return;
		}
		// 调用接口
		// username(4-12) password(4-12) nickname(1-10) sex avator create_time 必传   introduction 不必传
		var formData = new FormData();
		formData.set('username', registerUTrim);
		formData.set('password', registerPassWord);
		formData.set('nickname', registerNTrim);
		formData.set('sex', registerSex);
		formData.set('avator', registerAvator);
		formData.set('introduction', registerIntroduction);
		formData.set('create_time', new Date().toLocaleString());
		const info = await registerUser(formData);
		if (info.status === 0) {
			window.alert('恭喜您，注册成功！')
			this.setState({
				registerUserName: '',
				registerPassWord: '',
				registerNickName: '',
				registerIntroduction: '',
				registerAvator: null,
				registerSex: '男',
				imgsrc: '',
				activeIndex: 0
			})
		} else {
			window.alert(info.message)
		}
	}
	changeLoginValue (e, target) {
		this.setState({
			[target]: e.target.value
		})
	}
	changeRegisterValue (e, target) {
		this.setState({
			[target]: e.target.value
		})
	}
	changeAvator () {
		let file = this.fileInput.files[0];
		this.setState({
			imgsrc: URL.createObjectURL(file),
			registerAvator: file
		})
	}
	render () {
		let {
			activeIndex,
			loginUserName,
			loginPassWord,
			registerUserName,
			registerPassWord,
			registerNickName,
			registerIntroduction,
			registerSex,
			imgsrc
		} = this.state;
		return (
			<div className='mask'>
				<h2>欢迎来到悦享音乐平台</h2>
				<div className='login_box'>
					<div className='titles'>
						<div onClick={() => this.setState({ activeIndex: 0 })} className={activeIndex === 0 ? 'tactive' : 'red'}>登&nbsp;&nbsp;录</div>
						<div onClick={() => this.setState({ activeIndex: 1 })} className={activeIndex === 1 ? 'tactive' : 'red'}>注&nbsp;&nbsp;册</div>
					</div>
					{
						activeIndex === 0 ? <div className='login'>
							<div className='bear'>
								<div className='bear_eye'></div>
								<img draggable={'false'} src={bear} alt="" width="100%" height="100%"/>
							</div>
							<label htmlFor="username">用户名</label><input value={loginUserName} onChange={(e) => { this.changeLoginValue(e, 'loginUserName') }} autoComplete="off" placeholder='请输入用户名(不能是中文)' type="text" name="" />
							<label htmlFor="password">密码</label><input value={loginPassWord} onChange={(e) => { this.changeLoginValue(e, 'loginPassWord') }} placeholder='请输入密码' type="password" name="" />
							<div className='btn' onClick={() => { this.login(); }}>立即登录</div>
						</div> :
							<div className='register'>
								<label htmlFor="username">用户名</label><input onChange={(e) => { this.changeRegisterValue(e, 'registerUserName') }} value={registerUserName} autoComplete="off" placeholder='请输入用户名(不能是中文)' type="text" name="" />
								<label htmlFor="">性别</label>
								<select name="" id="" onChange={(e) => { this.changeRegisterValue(e, 'registerSex') }} value={registerSex}>
									<option value="男">男</option>
									<option value="女">女</option>
								</select>
								<label htmlFor="password">密码</label><input onChange={(e) => { this.changeRegisterValue(e, 'registerPassWord') }} value={registerPassWord} placeholder='请输入密码' type="password" name="" />
								<label htmlFor="nickname">昵称</label><input onChange={(e) => { this.changeRegisterValue(e, 'registerNickName') }} value={registerNickName} autoComplete="off" placeholder='请输入昵称' type="text" name="" id='nickname' />
								<label htmlFor="introduction">介绍</label><textarea onChange={(e) => { this.changeRegisterValue(e, 'registerIntroduction') }} value={registerIntroduction} name="" id="" cols="30" rows="10" placeholder='请输入自我介绍'></textarea>
								<label htmlFor="avator">头像</label><input onChange={() => { this.changeAvator() }} ref={c => this.fileInput = c} accept='image/*' type="file" name="" id="avator" style={{ left: "-9999px", position: "absolute" }} />
								<div className='img' onClick={() => this.fileInput.click()}>
									{imgsrc === '' ? null : <img width="100%" height="100%" src={imgsrc} alt="" />}
								</div>
								<div className='btn' onClick={() => { this.register() }}>立即注册</div>
							</div>
					}
				</div>
			</div>
		)
	}
}
